<template>
  <Card title="系统设置" :bodyStyle="{ display: 'flex', height: '79vh' }">
    <div class="set-left">
      <div
        v-for="(item, index) in state.configList"
        :key="index"
        class="set-item-title"
        :class="{ active: state.activeTab === index }"
        @click="changeTabFn(index)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="set-right">
      <div class="set-header">{{ state.configList[state.activeTab].title }}</div>
      <div class="set-content">
        <CheckboxGroup
          v-model:value="state.configList[state.activeTab].checkedList"
          :options="state.configList[state.activeTab].optionList"
        />
      </div>
      <div class="set-footer">
        <Button type="primary" @click="configSaveFn">保存</Button>
        <span v-show="state.activeTab === 0" style="color: red; margin-right: 30px">
          提示：选中模块需审核，未选中模块无需审核
        </span>
      </div>
    </div>
  </Card>
</template>

<script setup lang="ts">
import { Card, CheckboxGroup, message } from 'ant-design-vue';
import { reactive } from 'vue';
import Button from '@/framework/components/basic/button/button.vue';
import { commonBatchUpdate } from '@/api/common/common_data';
import { iceboxConfig, approvalConfig, saveCommonCfg } from '@/api/base/systemSetup_data';

/**
 * type
 */
type configListItem = {
  title: string;
  checkedList: any[];
  optionList: any[];
};

/**
 * data
 */
const state: {
  configList: configListItem[];
  activeTab: number;
} = reactive({
  configList: [
    {
      title: '审核配置',
      checkedList: [],
      optionList: [],
    },
    {
      title: '出入库方式配置',
      checkedList: [],
      optionList: [],
    },
    {
      title: '双人双锁配置',
      checkedList: [],
      optionList: [],
    },
    {
      title: '底单管理',
      checkedList: [],
      optionList: [],
    },
  ],
  activeTab: 0,
});

/**
 * fn
 */
const changeTabFn = (params): void => {
  state.activeTab = params;
};
const configSaveFn = async () => {
  let params: any;
  switch (state.activeTab) {
    case 0:
      await Promise.all(
        state.configList[0].optionList.map((item) => {
          let params = {
            value: state.configList[0].checkedList.includes(item.value) ? '1' : '0',
          };
          return saveCommonCfg(params, item.value);
        }),
      );
      break;
    case 1:
      await Promise.all(
        state.configList[1].optionList.map((item) => {
          let params = {
            value: state.configList[1].checkedList.includes(item.value) ? '1' : '0',
          };
          return saveCommonCfg(params, item.value);
        }),
      );
      break;
    case 2:
      params = {
        list: state.configList[2].optionList.map((item) => {
          return {
            id: item.value,
            value: state.configList[2].checkedList.includes(item.value) ? '1' : '0',
          };
        }),
      };
      console.log(params);
      await commonBatchUpdate(params);
      break;
    case 3:
      params = {
        list: state.configList[3].optionList.map((item) => {
          return {
            id: item.value,
            value: state.configList[3].checkedList.includes(item.value) ? '1' : '0',
          };
        }),
      };
      console.log(params);
      await commonBatchUpdate(params);
      break;
  }
  message.success('操作成功！');
};

/**
 * 配置数据获取
 */
// 审批数据
const getApprovalConfig = async () => {
  let params = {
    'orderBy[0].field': 'createTime',
    'orderBy[0].order': 'asc',
    groupId: 'approval_config',
  };
  let res = await approvalConfig(params);
  state.configList[0].optionList = res.result.map((item) => ({
    label: item.name,
    value: item.id,
  }));
  state.configList[0].checkedList = res.result
    .filter((item) => item.value === '1')
    .map((item) => item.id);
};
getApprovalConfig();
// 进出数据
const getIceboxConfig = async () => {
  const params = {
    'orderBy[0].field': 'createTime',
    'orderBy[0].order': 'asc',
    groupId: 'support_icebox_config',
  };
  let res = await iceboxConfig(params);
  state.configList[1].optionList = res.result.map((item) => ({
    label: item.name,
    value: item.id,
    disabled: item.key === 'general_icebox',
  }));
  state.configList[1].checkedList = res.result
    .filter((item) => item.value === '1')
    .map((item) => item.id);
};
getIceboxConfig();
// 双人配置
const getDoubleCheckConfig = async () => {
  const params = {
    'orderBy[0].field': 'sortIndex',
    'orderBy[0].order': 'asc',
    groupId: 'double_check_config',
  };
  let res = await iceboxConfig(params);
  state.configList[2].optionList = res.result.map((item) => ({
    label: item.name,
    value: item.id,
  }));
  state.configList[2].checkedList = res.result
    .filter((item) => item.value === '1')
    .map((item) => item.id);
};
getDoubleCheckConfig();
// 底单配置
const getBottomSheetConfig = async () => {
  const params = {
    'orderBy[0].field': 'sortIndex',
    'orderBy[0].order': 'asc',
    groupId: 'capture_config',
  };
  let res = await iceboxConfig(params);
  state.configList[3].optionList = res.result.map((item) => ({
    label: item.name,
    value: item.id,
  }));
  state.configList[3].checkedList = res.result
    .filter((item) => item.value === '1')
    .map((item) => item.id);
};
getBottomSheetConfig();
// 默认设置普通冰箱
const generalIceboxNotEditable = async () => {
  let res = await saveCommonCfg({ value: '1' }, 45);
  console.log('设置普通冰箱-成功 ', res);
};
generalIceboxNotEditable();
</script>

<style scoped lang="less">
.set-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 18%;
  height: 100%;
  padding: 30px 20px;
  margin-right: 10px;
  border-radius: 5px;
  border: 2px solid #f5f7f9;
  .set-item-title {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    text-align: center;
    white-space: nowrap;
    line-height: 50px;
    border-radius: 5px;
    cursor: pointer;
    &:hover {
      color: #2d8cf0;
    }
    &.active {
      box-shadow: 0 0 5px #b4b4b4;
    }
  }
}
.set-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  padding: 30px 90px 90px 50px;
  border-radius: 5px;
  border: 2px solid #f5f7f9;
  .set-header {
    color: #2d8cf0;
    margin-bottom: 30px;
  }
  .set-content {
    flex: 1;
  }
  .set-footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
}
:deep(.ant-checkbox-group) {
  display: flex;
  .ant-checkbox-wrapper {
    flex: 1;
    max-width: 200px;
  }
}
</style>
